import React, {JSX} from "react";
import {ControllerMappingInterface} from "../../../types/interface/form.control.interface";
import ContainerComponent from "../control/base";
import {ControllerPropertyInterface} from "../../../types/interface/form.control.interface";
import {v4 as UUID} from "uuid";

// 导入其他组件...

/**
 * 组件工厂 - 根据属性渲染对应的组件
 * @param property 组件属性
 * @returns React 元素
 */
export const renderComponent = (
    property: ControllerMappingInterface[keyof ControllerMappingInterface]
): JSX.Element => {
    switch (property.type) {
        case "Container":
            return <ContainerComponent {...property} />;

        // 添加其他组件的case...
        default:
            // 回退到默认容器
            return <ContainerComponent {...property} type="Container"/>;
    }
};

/**
 * 创建组件属性的工厂函数
 * @param type 组件类型
 * @returns 组件属性对象
 */
export const createComponentProperty = <K extends keyof ControllerMappingInterface>(
    type: K
): ControllerMappingInterface[K] => {
    const baseProps: ControllerPropertyInterface = {
        id: UUID(),
        name: type.toLowerCase(),
        title: `${type} Component`,
        type,
        x: 0,
        y: 0,
        z: 0,
        width: 200,
        height: 100,
        backgroundColor: "#ffffff",
    };

    // 根据类型添加特定属性
    switch (type) {
        case "Container":
            return {
                ...baseProps,
                width: 300,
                height: 200,
                backgroundColor: "#f0f0f0"
            } as ControllerMappingInterface[K];
        // 添加其他组件的case...
        default:
            return baseProps as ControllerMappingInterface[K];
    }
};